<template>
	<view class="openBook">
		<view :style="{'width':Width*2+'px','height':Height+'px'}" class="body">
			<!-- v-if="PageIndex-2<=index&&PageIndex+2>=index" -->
			<block v-for="(item,index) in  copyList" :key="index">
				<view class="pageBox" :style="item.leftBoxStyle" @touchstart="TouchStart"
					@touchmove="leftTouchEnd($event,index)">
					<view class="page" :style="item.leftStyle">
						<image :src="item.leftImg"></image>
					</view>
				</view>
				<view class="pageBox" :style="item.rightBoxStyle" @touchstart="TouchStart"
					@touchmove="rightTouchEnd($event,index)">
					<view class="page" :style="item.rightStyle">
						<image :src="item.rightImg"></image>
					</view>
				</view>
			</block>
			<view class="shadow"></view>
		</view>
	</view>
</template>

<script>
	import config from "../../config/config.js"
	export default {
		/**
		 * 组件的属性列表
		 */
		props: {
			// 图片列表
			list: {
				default: () => {
					return []
				},
				type: Array
			},
			// 开始的页码
			astrictNum: {
				default: 3,
				type: Number
			}
		},

		/**
		 * 组件的初始数据
		 */
		data() {
			return {
				Width: 0,
				PageIndex: 0,
				Height: 0,
				isPause: false,
				scollTop: 5,
				timer: null,
				timerSkip: "",
				ZiMu: {}, //当前语音对应的字幕
				StartPoint: {
					x: 0,
					Y: 0
				},
				isMute: false,
				audio: null,
				BookAudio: null,
				text: "",
				isAutoPlay: true,
				copyList: []
			}

		},

		/**
		 * 组件的方法列表
		 */
		methods: {
			setData(obj) {
				for (let key in obj) {
					this.$set(this, key, obj[key])
				}
			},
			AutoPlay() {
				this.isAutoPlay = true
				clearTimeout(this.timer)

			},
			// 播放音频
			playAudio() {
				this.isPause = false
				if (this.copyList[this.PageIndex].audio) {
					this.switchoverSound(this.copyList[this.PageIndex].audio)
				}
			},
			// 暂停音频
			pause() {
				this.audio.pause()
				this.isPause = true
			},
			// 停止自动播放
			stopPlay() {
				this.isAutoPlay = false
				clearTimeout(this.timer)
			},
			// 静音
			MuteFn() {
				if (this.audio) {
					this.audio.volume = 0
				}
				this.isMute = true
			},
			// 关闭静音
			MuteFnOff() {
				if (this.audio) {
					this.audio.volume = 1
				}
				this.isMute = false
			},


			initImageStrly() {
				let copyList = JSON.parse(JSON.stringify(this.copyList))
				copyList.forEach((item, index) => {
					if (index == 0) {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;transform: translateX(${-this.Width}px);z-index:${((this.copyList.length-index)*2)}`
					} else {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:${((this.copyList.length-index)*2)}`
					}
					item.leftStyle = `width:${this.Width}px;height:${this.Height}px`
					item.rightBoxStyle =
						`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:${((this.copyList.length-index)*2-1)}`
					item.rightStyle = `width:${this.Width}px;height:${this.Height}px`
				})
				if (copyList[0].audio) {
					this.switchoverSound(copyList[0].audio)
				}
				this.setData({
					copyList: copyList,
					text: copyList[0].text
				})


			},
			leftTouchEnd(e, PageIndex, flag) {

				let L = e.touches[0].pageX - this.StartPoint.x
				if (L > 0 && Math.abs(L) > 20) {

					this.isAutoPlay = false
					if (PageIndex == 0) {
						uni.showToast({
							title: '前面没有了哦',
							icon: "none"
						})
						return
					} else {
						this.previousPage(PageIndex)

					}
				}
			},
			rightTouchEnd(e, PageIndex, flag) {
				if (this.ismove) {
					return
				}
				let L = e.touches[0].pageX - this.StartPoint.x
				if (L < 0 && Math.abs(L) > 1) {
					this.isAutoPlay = false
					this.nextPage(PageIndex)
				}
			},
			// 翻动下一页
			nextPage(PageIndex) {

				this.ismove = true
				if (this.astrictNum != 0 && PageIndex + 1 >= this.astrictNum) {
					uni.showToast({
						title: '后面被限制了哦',
						icon: "none"
					})
					this.ismove = false

					return
				}
				if (PageIndex >= this.copyList.length - 1) {
					uni.showToast({
						title: '后面没有了哦',
						icon: "none"
					})
					this.ismove = false
					this.$emit("end")
					return
				}
				let copyList = JSON.parse(JSON.stringify(this.copyList))
				copyList.forEach((item, index) => {
					// 处理左边
					if (index == PageIndex) {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:0px;z-index:99`
						item.leftStyle = `width:${this.Width}px;height:${this.Height}px`
					} else if (index == PageIndex + 1) { //翻动的页面
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:101;transform-origin: ${this.Width}px 0; overflow: hidden;transform: rotate(-32deg);`
						item.leftStyle =
							`width:${this.Width}px;height:${this.Height}px;transform-origin: 0 0;transform: translateX(${this.Width}px) translateY(0px);`
					} else {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:${((this.copyList.length-index)*2)}`
						item.leftStyle = `width:${this.Width}px;height:${this.Height}px`
					}
					// 处理右边
					if (index == PageIndex) {
						item.rightBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:99`
						item.rightStyle = `width:${this.Width}px;height:${this.Height}px`
					} else if (index == PageIndex + 1) {
						item.rightBoxStyle =
							`width:${this.Width}px;height:${this.Height*2}px;position:absolute;left:${this.Width}px;top:0px;z-index:100;transform-origin: 0 0;transform: translateX(${this.Width}px) rotate(-32deg);overflow: hidden;`
						item.rightStyle =
							`width:${this.Width}px;height:${this.Height}px;position: absolute;right: 0px;top:0px;transform-origin: 0 0;transform: rotate(32deg) translateX(-${this.Width}px);`
					} else {
						item.rightBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:${((this.copyList.length-index)*2-1)}`
						item.rightStyle = `width:${this.Width}px;height:${this.Height}px`
					}
				})
				this.setData({
					copyList: copyList
				})

				setTimeout(() => {
					let copyList = JSON.parse(JSON.stringify(this.copyList))
					copyList[PageIndex + 1].rightBoxStyle =
						`width:${this.Width}px;height:${this.Height*2}px;position:absolute;left:${this.Width}px;top:0px;z-index:100;transform-origin: 0 0;transform: translateX(0px) rotate(0deg);transition:transform 1s;overflow: hidden`
					copyList[PageIndex + 1].rightStyle =
						`width:${this.Width}px;height:${this.Height}px;position: absolute;right: 0px;top:0px;transform-origin: 0 0;transform: rotate(0deg) translateX(0px);transition:transform 1s;`

					copyList[PageIndex + 1].leftBoxStyle =
						`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:101;transform-origin:${this.Width}px 0; overflow: hidden; transform: translateX(-${this.Width}px) rotate(0deg);transition:transform 1s;`
					copyList[PageIndex + 1].leftStyle =
						`width:${this.Width}px;height:${this.Height}px;transform-origin: 0 0;transform: translateX(0px) rotate(0deg);transition:transform 1s;`

					this.setData({
						text: this.copyList[this.PageIndex].text,
						PageIndex: PageIndex + 1,
						copyList: copyList
					})
					this.BookAudioFn()
					this.ismove = false
					this.$emit("change", {
						pageIndex: PageIndex + 1,
						isAutoPlay: this.isAutoPlay
					})
					setTimeout(() => {
						if (copyList[this.PageIndex].audio && !this.isPause) {
							this.switchoverSound(copyList[this.PageIndex].audio)
						}
					}, 1000);
				}, 300)
			},
			// 翻动上一页
			previousPage(PageIndex) {
				this.ismove = true
				if (PageIndex <= 0) {
					uni.showToast({
						title: '前面没有了哦',
						icon: "none"
					})
					this.ismove = false
					return
				}
				let copyList = JSON.parse(JSON.stringify(this.copyList))
				copyList.forEach((item, index) => {
					// 处理左边
					if (index == PageIndex) {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:0px;z-index:99`
						item.leftStyle = `width:${this.Width}px;height:${this.Height}px`
					} else if (index == PageIndex - 1) {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height*2}px;position:absolute;left:0px;z-index:100;transform-origin: ${this.Width}px 0; transform: translateX(${-this.Width}px) rotate(32deg);overflow: hidden;`
						item.leftStyle =
							`width:${this.Width}px;height:${this.Height}px;transform-origin: ${this.Width}px 0;transform: rotate(-32deg) translateX(${this.Width}px) ;top:0`
					} else {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:${((this.copyList.length-index)*2)}`
						item.leftStyle = `width:${this.Width}px;height:${this.Height}px`
					}
					// 处理右边
					if (index == PageIndex) {
						item.rightBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:99`
						item.rightStyle = `width:${this.Width}px;height:${this.Height}px`
					} else if (index == PageIndex - 1) { //翻动的页面
						item.rightBoxStyle =
							`width:${this.Width}px;height:${this.Height*2}px;position:absolute;left:0px;top:0px;z-index:101;transform-origin: ${0}px 0;transform: rotate(32deg)`
						item.rightStyle =
							`width:${this.Width}px;height:${this.Height}px;position: absolute;right: 0px;top:0px;transform-origin: 0 0;transform:translateX(${-this.Width}px)`
					} else {
						item.rightBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:${((this.copyList.length-index)*2-1)}`
						item.rightStyle = `width:${this.Width}px;height:${this.Height}px`
					}
				})
				this.setData({
					copyList: copyList
				})
				setTimeout(() => {
					let copyList = JSON.parse(JSON.stringify(this.copyList))
					copyList[PageIndex - 1].rightBoxStyle =
						`width:${this.Width}px;height:${this.Height*2}px;position:absolute;left:0px;top:0px;z-index:101;transform-origin: ${0}px 0;transform: translateX(${this.Width}px) rotate(0deg);transition:transform 1s;overflow: hidden`
					copyList[PageIndex - 1].rightStyle =
						`width:${this.Width}px;height:${this.Height}px;position: absolute;right: 0px;top:0px;transform-origin: 0 0;transform:translateX(0px);transition:transform 1s; `
					copyList[PageIndex - 1].leftBoxStyle =
						`width:${this.Width}px;height:${this.Height*2}px;position:absolute;left:0px;z-index:100;transform-origin: ${this.Width}px 0; transform: translateX(0px) rotate(0deg);overflow: hidden;transition:transform 1s;`
					copyList[PageIndex - 1].leftStyle =
						`width:${this.Width}px;height:${this.Height}px;transform-origin: ${this.Width}px 0;transform: rotate(0deg) translateX(0px) ;top:0;transition:transform 1s;`
					this.setData({
						text: this.copyList[this.PageIndex].text,
						PageIndex: PageIndex - 1,
						copyList: copyList
					})
					this.$emit("change", {
						pageIndex: PageIndex - 1,
						isAutoPlay: this.isAutoPlay
					})
					this.audio.pause()
					this.BookAudioFn()
					this.ismove = false
					setTimeout(() => {
						if (copyList[this.PageIndex].audio && !this.isPause) {
							this.switchoverSound(copyList[this.PageIndex].audio)
						}
					}, 1000);
				}, 300)
			},

			skip(PageIndex) {
				if (this.astrictNum != 0 && PageIndex >= this.astrictNum) {
					uni.showToast({
						title: '后面被限制了哦',
						icon: "none"
					})
					return
				}
				if (PageIndex == this.pageNum || PageIndex < 0 || PageIndex >= this.copyList.length) {
					return
				}
				this.audio.pause()
				this.copyList.forEach((item, index) => {
					if (index == PageIndex) {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:0px;z-index:100`
						item.rightBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:100`
					} else {
						item.leftBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:${((this.copyList.length-index)*2)}`
						item.rightBoxStyle =
							`width:${this.Width}px;height:${this.Height}px;position:absolute;left:${this.Width}px;z-index:${((this.copyList.length-index)*2-1)}`
					}
					item.leftStyle = `width:${this.Width}px;height:${this.Height}px`
					item.rightStyle = `width:${this.Width}px;height:${this.Height}px`
				})
				this.setData({
					copyList: this.copyList,
					PageIndex: PageIndex
				})
				clearTimeout(this.timerSkip)
				this.timerSkip = setTimeout(() => {
					if (this.copyList[this.PageIndex].audio && !this.isPause) {
						this.audio.src = this.copyList[this.PageIndex].audio
						this.switchoverSound(this.copyList[this.PageIndex].audio)
					}
				}, 1000)
				this.setData({
					text: this.copyList[this.PageIndex].text,
				})
				this.$emit("change", {
					pageIndex: PageIndex,
					isAutoPlay: this.isAutoPlay
				})
			},

			TouchStart(e) {
				this.StartPoint.x = e.touches[0].pageX
				this.StartPoint.y = e.touches[0].pageY
			},
			whFn() {
				let that = this
				if (this.copyList.length == 0) {
					return
				}
				uni.getImageInfo({
					src: this.copyList[0].leftImg,
					success(res) {
						let SystemInfo = uni.getSystemInfoSync()
						let windowHeight = SystemInfo.windowHeight
						let windowWidth = SystemInfo.windowWidth
						if (windowWidth / 2 / res.width * res.height > windowHeight) { //图片的宽铺满后 高度大于 设备的高度
							that.setData({
								Height: windowHeight,
								Width: Math.floor(res.width / (res.height / windowHeight))
							})

						} else {
							that.setData({
								Height: Math.floor(res.height / (res.width / Math.floor(windowWidth / 2))),
								Width: Math.floor(windowWidth / 2)
							})
						}
						that.initImageStrly()
					},
					fail(err) {
						console.error(err)
					}
				})
			},
			tidyTime(timeStr) {
				if (timeStr == undefined) {
					return
				}
				let time = []
				let timeArr = timeStr.split(":")
				time.push(timeArr[0])
				let timeArrTwo = timeArr[1].split(".")
				time.push(...timeArrTwo)
				return Number(time[0]) * 60 + Number(time[1])
			},
			switchoverSound(src) {
				if (!src) {
					this.audio.pause()
					return
				}
				if (uni.canIUse("createInnerAudioContext")) {
					if (this.audio) {
						this.audio.pause()
						this.audio.destroy()
					}
					this.audio = uni.createInnerAudioContext()
					this.audio.src = src
					this.audio.autoplay = true
					if (this.isMute) {
						this.audio.volume = 0
					} else {
						this.audio.volume = 1
					}
					this.audio.onEnded(() => {
						if (this.timer) {
							clearTimeout(this.timer)
							this.timer = null
						}
						if (this.isAutoPlay) {
							this.nextPage(this.PageIndex)
						}
					})

				} else {
					uni.showToast({
						title: '微信版本过低，请升级微信客户端',
						icon: "none"
					})
				}

			},
			BookAudioFn() {
				let audio = uni.createInnerAudioContext()
				audio.src = config.imgUrl + "book.mp3"
				audio.autoplay = true
			},

			destroy() {
				this.audio.destroy()
			}
		},

		mounted() {
			if (this.copyList.length) {
				this.copyList = JSON.parse(JSON.stringify(this.list))
				this.whFn()
			} else {
				setTimeout(() => {
					this.copyList = JSON.parse(JSON.stringify(this.list))
					this.whFn()
				}, 200)
			}

		},

		destroyed() {
			this.MuteFn()
			this.stopPlay()
			this.destroy()
		}

	}
</script>

<style>
	image {
		width: 100%;
		height: 100%;
	}

	.openBook {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFFFFF;
	}

	.body {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		background-color: #FFFFFF;
		overflow: hidden;
	}



	.shadow {
		width: 20rpx;
		height: 100%;
		left: 50%;
		top: 0;
		position: absolute;
		z-index: 200;
		/* box-shadow: 0 0 11rpx rgb(0, 0, 0, 0.5); */
		/* background: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, .18)), to(rgba(0, 0, 0, 0))); */
	}
</style>
